<template>
  <view class="searchLayout">
    <view class="search">
      <uni-search-bar
        class="search-bar"
        @confirm="onSearch"
        @cancel="onClear"
        @clear="onClear"
        focus
        placeholder="搜索"
        v-model="queryParams.keyword"
      >
      </uni-search-bar>
    </view>

    <view v-if="!classList.length || noSearch">
      <view class="history" v-if="historySearch.length">
        <view class="topTitle">
          <view class="text">最近搜索</view>
          <view class="icon" @click="removeHistory">
            <uni-icons type="trash" size="25"></uni-icons>
          </view>
        </view>
        <view class="tabs">
          <view class="tab" v-for="tab in historySearch" :key="tab" @click="clickTab(tab)">{{
            tab
          }}</view>
        </view>
      </view>

      <view class="recommend">
        <view class="topTitle">
          <view class="text">热门搜索</view>
        </view>
        <view class="tabs">
          <view class="tab" v-for="tab in recommendList" :key="tab" @click="clickTab(tab)">{{
            tab
          }}</view>
        </view>
      </view>
    </view>

    <view class="noSearch" v-if="noSearch">
      <uv-empty mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png"></uv-empty>
    </view>

    <view v-else>
      <view class="list">
        <navigator
          :url="`/pages/preview/preview?id=${item._id}`"
          class="item"
          v-for="item in classList"
          :key="item._id"
        >
          <image :src="item.smallPicurl" mode="aspectFill"></image>
        </navigator>
      </view>
      <view class="loadingLayout" v-if="noData || classList.length">
        <uni-load-more :status="noData ? 'noMore' : 'loading'" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onUnload, onReachBottom } from '@dcloudio/uni-app'

//查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 12,
  keyword: '',
})

//搜索历史词
const historySearch = ref(uni.getStorageSync('historySearch') || [])

//热门搜索词
const recommendList = ref(['金标', '小国', '省标', '市标', '排位'])

//没有更多
const noData = ref(false)
//没有搜索结果
const noSearch = ref(false)

//搜索结果列表
const classList = ref([])

//点击搜索
const onSearch = () => {
  uni.showLoading()
  historySearch.value = [...new Set([queryParams.value.keyword, ...historySearch.value])].slice(
    0,
    10,
  )

  uni.setStorageSync('historySearch', historySearch.value)
  initParams(queryParams.value.keyword)
  // searchData()
  console.log(queryParams.value.keyword)
}

//点击清除按钮
const onClear = () => {
  initParams()
}

//点击标签进行搜索
const clickTab = (value) => {
  initParams(value)

  // onSearch()
}

//点击清空搜索记录
const removeHistory = () => {
  uni.showModal({
    title: '是否清空历史搜索？',
    success: (res) => {
      if (res.confirm) {
        uni.removeStorageSync('historySearch')
        historySearch.value = []
      }
    },
  })
}

const searchData = async () => {
  try {
    let res = await apiSearchData(queryParams.value)
    classList.value = [...classList.value, ...res.data]
    uni.setStorageSync('storgClassList', classList.value)
    if (queryParams.value.pageSize > res.data.length) noData.value = true
    if (res.data.length == 0 && classList.value.length == 0) noSearch.value = true
    console.log(res)
  } finally {
    uni.hideLoading()
  }
}

const initParams = (value = '') => {
  classList.value = []
  noData.value = false
  noSearch.value = false
  queryParams.value = {
    pageNum: 1,
    pageSize: 12,
    keyword: value || '',
  }
}

//触底加载更多
onReachBottom(() => {
  if (noData.value) return
  queryParams.value.pageNum++
  // searchData()
})

//关闭有页面
onUnload(() => {
  uni.removeStorageSync('storgClassList', classList.value)
})
</script>

<style lang="scss" scoped>
.searchLayout {
  .search {
    padding: 0 10rpx;

    .search-bar {
      ::v-deep .uni-searchbar__box {
        border-radius: $brand-border-radius !important;
      }
    }
  }
  .topTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32rpx;
    color: #999;
  }
  .history {
    padding: 30rpx;
  }
  .recommend {
    padding: 30rpx;
  }
  .tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 20rpx;
    .tab {
      background: #f4f4f4;
      font-size: 28rpx;
      color: #333;
      padding: 10rpx 28rpx;
      border-radius: 50rpx;
      margin-right: 20rpx;
      margin-top: 20rpx;
    }
  }
  .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rpx;
    padding: 20rpx 5rpx;
    .item {
      height: 440rpx;
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>
